<template>
  <!-- 上下结构 -->
  <div class="index">
    <!-- 上 -->
    <div class="header">
      <div class="head-left">
        <img src="../assets/logo.png" alt />
      </div>
      <div class="head-right">
        <div class="head-right-one">
          <img :src="this.$store.state.userinfo.avatar" alt />
          <div>{{this.$store.state.userinfo.nickname}}</div>
        </div>
        <!-- <div class="head-right-two">
          <img src="../assets/xiaoxi.png" alt />
          <div class="redkuai"></div>
        </div> -->
        <div class="head-right-three shoushou" @click="showtuichu">
          <img src="../assets/tuichu.png" alt />
        </div>
      </div>
    </div>
    <!-- 下 -->
    <div class="content">
      <!-- 左侧边栏 -->
      <div class="nav">
        <div class="nav-box">
          <div class="navitem shoushou" @click="xiala(1)">
            <!-- <div class="hong">
              <img src="../assets/pc.png" alt />
            </div> -->
             <div class="hongbox">
              <div  v-if="lxhisopen==false" class="hong" style="width:3px;"></div>
              <div v-if="lxhisopen==true" class="hong" style="width:100%;"></div>
              <img style="position: absolute;width:21px;height:21px;" src="../assets/pc.png" alt />
            </div>
            
            <div class="lexunhao" style="width:64px;">乐讯号</div>
            <div class="zhankai">
              <img class="xia" v-if="lxhisopen==true" src="../assets/xia.png" alt />
              <img class="you" v-if="lxhisopen==false" src="../assets/right.png" alt />
            </div>
          </div>
          <div class="xiabox" v-if="lxhisopen==true">
            <div class="boxitem shoushou" :class="[active==1?'active':'']" @click="selectitem(1)">主页</div>
            <div class="boxitem shoushou" :class="[active==2?'active':'']" @click="selectitem(2)">发文</div>
            <div class="boxitem shoushou" :class="[active==3?'active':'']" @click="selectitem(3)">内容管理</div>
            <div class="boxitem shoushou" :class="[active==4?'active':'']" @click="selectitem(4)">评论管理</div>
            <div class="boxitem shoushou" :class="[active==5?'active':'']" @click="selectitem(5)">数据分析</div>
            <div class="boxitem shoushou" :class="[active==6?'active':'']" @click="selectitem(6)">创作引导</div>
          </div>
          <div class="navitem shoushou" @click="xiala(2)">
            <div class="lanbox">

              <div  v-if="grisopen==false" class="lan" style="width:3px;"></div>
              <div v-if="grisopen==true" class="lan" style="width:100%;"></div>
              <img style="position: absolute;width:21px;height:21px;" src="../assets/person.png" alt />
            </div>
            <div class="gerenzhongxin" style="width:64px;">个人中心</div>
            <div class="zhankai">
              <img class="xia" v-if="grisopen==true" src="../assets/xia.png" alt />
              <img class="you" v-if="grisopen==false" src="../assets/right.png" alt />
            </div>
          </div>
          <div class="xiabox" v-if="grisopen==true">
            <div class="boxitem shoushou" :class="[active==7?'active':'']" @click="selectitem(7)">账号设置</div>
            <div class="boxitem shoushou" :class="[active==8?'active':'']" @click="selectitem(8)">我的粉丝</div>
            <div class="boxitem shoushou" :class="[active==9?'active':'']" @click="selectitem(9)">结算提现</div>
          </div>
        </div>
      </div>
      <!-- 右主体内容 -->
      <div class="main">
        <!-- 您现在所在的位置 -->
        <div class="weizhi">
          您现在所在的位置：
          <span v-for="(item,index) in $store.state.mianbaoxie" :key="index" >{{index==0?'':'>'}} {{item}} </span>
          <!-- <span>> 主页 </span>
          <span>> 学习</span> -->
        </div>
        <!-- 需要更换的box -->

        <router-view />

        <!-- <xuexigonggao class="xuexigonggao"></xuexigonggao> -->
      </div>
    </div>
    <!-- 退出弹框 -->
    <div class="tuichutc" v-if="showtuichutc == true">
      <div class="tuichubox">
        <div class="tuichuhead">
          <div>退出登录</div>
          <img class="shoushou"  @click="quxiao_tcdl" src="../assets/guanbi.png" alt />
        </div>
        <div class="tuichuzhong">确定要退出当前登录吗？</div>
        <div class="tuichuxia">
          <div></div>
          <div class="tuichuanniu">
            <div class="quxiaoanniu shoushou" @click="quxiao_tcdl">取消</div>
            <div class="quedinganniu shoushou" @click="queding_tcdl">确定</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除弹框 -->
    <!-- <div class="shanchutc">
      <div class="shanchubox">
        <div class="shanchuhead">
          <div>删除</div>
          <img src="../assets/guanbi.png" alt="">
        </div>
        <div class="shanchuzhong">我要删除的是“ <span>@小厨娘</span>”发的评论 </div>
        <div class="shanchuxia">
          <div></div>
          <div class="shanchuanniu">
            <div class="quxiaoanniu">取消</div>
            <div class="quedinganniu">确定</div>
          </div>
        </div>
      </div>
    </div>-->
    <!-- 评论弹框 -->
    <!-- <div class="pingluntc">
      <div class="pinglunbox">
        <div class="pinglunhead">
          <div>评论</div>
          <img src="../assets/guanbi.png" alt="">
        </div>
        <div class="pinglunzhong">我要评论的是“<span>@小厨娘</span> ”发的评论：</div>
        <div class="pinglunzhong2">
          <img src="" alt="">
          <input type="text">
        </div>
        <div class="pinglunxia">
          <div></div>
          <div class="pinglunanniu">
            <div class="quxiaoanniu">取消</div>
            <div class="quedinganniu">评论</div>
          </div>
        </div>
      </div>
    </div>-->
    <!-- 投诉 -->
    <!-- <div class="tousutc"> 
      <div class="tousubox">
        <div class="tousushang">
          <div class="tousuhead">
            <div>投诉</div>
            <img src="../assets/guanbi.png" alt="">
          </div>
          <div class="tousuzhong">我要投诉的是“<span>@小厨娘</span> ”发的评论：</div>
          <div class="tousuzhong2">
            <img src="" alt="">
            <div>@小厨娘：<span>同一时间的天空</span></div>
          </div>
          <div class="tousuzhong3">请选择你想要投诉的类型</div>
          <div class="tousuzhong4">
            <div>垃圾营销</div>
            <div>涉黄信息</div>
            <div>不实信息</div>
            <div>人身攻击</div>
            <div>有害信息</div>
            <div>内容抄袭</div>
            <div>违法信息</div>
            <div>诈骗信息</div>
            <div>恶意营销</div>
          </div>
        </div>
        <div class="tousunxia">
          <div></div>
          <div class="tijiaoanniu">提交</div>
        </div>
      </div>
    </div>-->
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      showtuichutc: false,

      lxhisopen: true,
      grisopen: true,
      active: 1,
      userinfo:"",

      // mianbaoxie:['1','2','3']
    };
  },
  mounted () {
    if(!localStorage.getItem('uqid')){
      this.$router.push({ path: "/login", query: {  } });
      return
    }

    this.getmyinfo()
    console.log(this.$router)
    if(this.$router.history.current.name=='indexbox'){
      this.active=1

      this.$store.state.mianbaoxie=['乐讯号','主页']
    }
    if(this.$router.history.current.name=='nrguanli'){
      this.active=3
      this.$store.state.mianbaoxie=['乐讯号','内容管理','文章']
    }
    if(this.$router.history.current.name=='pinglunguanli'){
      this.active=4
      this.$store.state.mianbaoxie=['乐讯号','评论管理','文章']
    }
    if(this.$router.history.current.name=='shujufenxi'){
      this.active=5
       this.$store.state.mianbaoxie=['乐讯号','数据分析','文章']
    }

    if(this.$router.history.current.name=='chuangzuoyindao'){
      this.active=6
       this.$store.state.mianbaoxie=['乐讯号','创作引导',]
    }

    if(this.$router.history.current.name=='zhanghaoshezhi'){
      this.active=7

       this.$store.state.mianbaoxie=['个人中心','账号设置','账号信息']
    }
    if(this.$router.history.current.name=='fans'){
      this.active=8
      this.$store.state.mianbaoxie=['个人中心','我的粉丝','粉丝概况']
    }
    if(this.$router.history.current.name=='jiesuantixian'){
      this.active=9
      this.$store.state.mianbaoxie=['个人中心','结算提现',]
    }
  
  },
  methods: {
    xiala(index) {
      if (index == 1) {
        this.lxhisopen = !this.lxhisopen;
      }
      if (index == 2) {
        this.grisopen = !this.grisopen;
      }
    },
    selectitem(index) {
      this.active = index;
      if (index == 1) {
        this.$router.push({ name: "indexbox", params: {} });
         this.$store.state.mianbaoxie=['乐讯号','主页']
      }
      if (index == 2) {
        this.$router.push({ path: "/fawen2", query: { toptab:'1' } });
        
      }
      if (index == 3) {
        this.$router.push({ name: "nrguanli", params: {} });
        this.$store.state.mianbaoxie=['乐讯号','内容管理','文章']
      }
      if (index == 4) {
        this.$router.push({ name: "pinglunguanli", params: {} });
         this.$store.state.mianbaoxie=['乐讯号','评论管理','文章']
      }
      if (index == 5) {
        this.$router.push({ name: "shujufenxi", params: {} });
        this.$store.state.mianbaoxie=['乐讯号','数据分析','文章']
      }

      if (index == 6) {
        this.$router.push({ name: "chuangzuoyindao", params: {} });
        this.$store.state.mianbaoxie=['乐讯号','创作引导',]
      }

      if (index == 7) {
        this.$router.push({ name: "zhanghaoshezhi", params: {} });
         this.$store.state.mianbaoxie=['个人中心','账号设置','账号信息']
      }
      if (index == 8) {
        this.$router.push({ name: "fans", params: {} });
         this.$store.state.mianbaoxie=['个人中心','我的粉丝','粉丝概况']
      }
      if (index == 9) {
        this.$router.push({ name: "jiesuantixian", params: {} });
        this.$store.state.mianbaoxie=['个人中心','结算提现',]
      }
    },
    getmyinfo() {
      this.$get(
        // method: "get",
        "media/users/info",
        {
          uqid:localStorage.getItem('uqid')
        }
      ).then(response => {
        console.log(response);
        if (response.error == "0") {
          this.userinfo=response.data

           this.$store.state.userinfo=response.data

          localStorage.setItem('userinfo',JSON.stringify(response.data))
        }else{
          this.$message({
            showClose: true,
            message: response.message,
            type: 'error'
          });

          if(response.error == "4010"){
            this.$router.push({ path: "/login", query: {  } });
            return
          }
          if(response.error == "4011"){
            this.$router.push({ path: "/login", query: {  } });
            return
          }
          if(response.error == "4012"){
            this.$router.push({ path: "/login", query: {  } });
            return
          }
          if(response.error == "4014"){
            this.$router.push({ path: "/login", query: {  } });
            return
          }
        }
      });

    },

    showtuichu(){
      console.log('aaaaa')
      this.showtuichutc=true
    },
    quxiao_tcdl(){
      this.showtuichutc=false
    },
    queding_tcdl(){
      localStorage.setItem('uqid','')
      this.$router.push({ name: "login", params: {} });
    }
  }
};
</script>

<style scoped>
/* .you-xia{
    animation: youxia 1s ;

}

@keyframes youxia{
    100% {
        transform: rotate(90deg);
    }
} */
.active {
 background:#7CD5C0!important;
}

.index {
  width: 100%;
  height: 100%;
  font-size: 14px;
}
/* <!-- 上 --> */
.header {
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.head-left {
  height: 100%;
}
.head-left img {
  width: 89px;
  height: 30px;
  margin-left: 17px;
  margin-top: 9px;
}
.head-right {
  height: 100%;
  display: flex;
  align-items: center;
}
.head-right-one,
.head-right-three {
  display: flex;
  align-items: center;
}
.head-right-one div {
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-right: 23px;
  margin-left: 10px;
}
.head-right-two {
  position: relative;
}
.head-right-one img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.head-right-two img {
  width: 20px;
  height: 18px;
}
.redkuai {
  position: absolute;
  left: 11px;
  top: -4px;
  width: 15px;
  height: 11px;
  background: rgba(255, 0, 82, 1);
  border: 1px solid rgba(255, 255, 255, 1);
  opacity: 0.5;
  border-radius: 4px;
}
.head-right-three img {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  margin-left: 30px;
}
/* <!-- 下 --> */
.content {
  width: 100%;
  height: calc(100vh - 48px);
  display: flex;
  justify-content: space-between;
}
/* <!-- 左侧边栏 --> */
.nav {
  width: 13%;
  height: 100%;
  background: rgba(67,194,165,1);
  opacity: 1;
}
.nav-box {
  width: 100%;
  height: 100%;
}
.navitem {
  width: 100%;
  height: 51px;
  background:rgba(67,194,165,1);
  opacity: 1;
  border-bottom: 2px solid rgba(67,194,165,1);
  display: flex;
  align-items: center;
  position: relative;
}
.navitem .hongbox {
  width: 52px;
  height: 50px;
  /* background: rgba(255, 0, 82, 1); */
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.navitem .hong{
  height:100%;
  /* background: rgba(255, 0, 82, 1); */
  position: absolute;
  left:0;
  top:0;
}

.navitem .hong img {
  width: 22px;
  height: 19px;
}
.navitem .lexunhao {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  /* margin-left: 17px; */
  margin-right: 31px;
}
.navitem .zhankai{
  font-size: 16px;
}

.navitem .zhankai .xia {

  width: 12px;
  height: 8px;
}
.navitem .zhankai .you {
  width: 8px;
  height: 12px;
}
.xiabox {
  width: 100%;
}
.boxitem {
  width: 100%;
  height: 51px;
  background: #43C2A5;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  line-height: 51px;
  padding-left: 52px;
  box-sizing: border-box;
  border-bottom: 2px solid #43C2A5;
}
.navitem .lanbox {
  width: 52px;
  height: 50px;
  
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.lan{
  /* width:3px; */
  height:100%;
  /* background: rgba(38, 106, 255, 1); */
  position: absolute;
  left:0;
  top:0;
}
.navitem .lan img {
  width: 21px;
  height: 21px;
}
.navitem .gerenzhongxin {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  /* margin-left: 17px; */
  margin-right: 31px;
}
/* <!-- 右主体内容 --> */
.main {
  width: 87%;
  height: 100%;
  background: #f2f2f2;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
}
/* <!-- 您现在所在的位置 --> */
.weizhi {
  width: 100%;
  height: 49px;
  margin: auto;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  line-height: 49px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin-top: 29px;
  padding-left: 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.weizhi span {
  color: rgba(38, 106, 255, 1);
}
/* <!-- 需要更换的box --> */
/* <!-- 退出弹框 --> */
.tuichutc {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.12);
  z-index: 999;
}
.tuichubox {
  width: 499px;
  height: 156px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 4px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 20px;
  box-sizing: border-box;
}
.tuichuhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.tuichuhead > div {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}
.tuichuhead > img {
  width: 11px;
  height: 11px;
}
.tuichuzhong {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 14px;
}
.tuichuxia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}
.tuichuanniu {
  display: flex;
  align-items: center;
}
.quxiaoanniu {
  width: 62px;
  height: 26px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 20px;
}
.quedinganniu {
  width: 62px;
  height: 26px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
/* 删除弹框 */
.shanchutc {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.12);
  z-index: 999;
}
.shanchubox {
  width: 499px;
  height: 156px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 4px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 20px;
  box-sizing: border-box;
}
.shanchuhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.shanchuhead > div {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}
.shanchuhead > img {
  width: 11px;
  height: 11px;
}
.shanchuzhong {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 14px;
}
.shanchuzhong > span {
  color: #266aff;
}
.shanchuxia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}
.shanchuanniu {
  display: flex;
  align-items: center;
}
.quxiaoanniu {
  width: 62px;
  height: 26px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 20px;
}
.quedinganniu {
  width: 62px;
  height: 26px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
/* .评论弹框 */
.pingluntc {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.12);
  z-index: 999;
}
.pinglunbox {
  width: 499px;
  height: 211px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 4px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 20px;
  box-sizing: border-box;
}
.pinglunhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.pinglunhead > div {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}
.pinglunhead > img {
  width: 11px;
  height: 11px;
}
.pinglunzhong {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 14px;
}
.pinglunzhong > span {
  color: #266aff;
}
.pinglunzhong2 {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 22px;
}
.pinglunzhong2 > img {
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 1);
  border-radius: 50%;
  opacity: 1;
}
.pinglunzhong2 > input {
  width: 422px;
  height: 30px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 2px;
  margin-left: 7px;
}
.pinglunxia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}
.pinglunanniu {
  display: flex;
  align-items: center;
}
.quxiaoanniu {
  width: 62px;
  height: 26px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 20px;
}
.quedinganniu {
  width: 62px;
  height: 26px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
/* 投诉 */
.tousutc {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(51, 51, 51, 0.12);
  z-index: 999;
}
.tousubox {
  width: 512px;
  height: 429px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 4px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.tousushang {
  padding: 0 20px;
  box-sizing: border-box;
  width: 512px;
  height: 343px;
  border-bottom: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
}
.tousuhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.tousuhead > div {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}
.tousuhead > img {
  width: 11px;
  height: 11px;
}
.tousuzhong {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 14px;
}
.tousuzhong > span {
  color: #266aff;
}
.tousuzhong2 {
  display: flex;
  width: 100%;
  height: 59px;
  background: rgba(242, 242, 245, 1);
  opacity: 1;
  border-radius: 4px;
  margin-top: 9px;
  padding: 0 16px;
  padding-top: 13px;
  box-sizing: border-box;
}
.tousuzhong2 > img {
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 1);
  border-radius: 50%;
  opacity: 1;
  margin-right: 7px;
}
.tousuzhong2 > div {
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: rgba(38, 106, 255, 1);
  opacity: 1;
}
.tousuzhong2 > div > span {
  color: rgba(51, 51, 51, 1);
}
.tousuzhong3 {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 16px;
}
.tousuzhong4 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tousuzhong4 > div {
  width: 109px;
  height: 37px;
  background: rgba(242, 242, 245, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 37px;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  margin-top: 10px;
}
.tousunxia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.tijiaoanniu {
  width: 92px;
  height: 36px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 36px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin-right: 22px;
}
</style>